<template>
    <div class="orderBox">
      <van-nav-bar
        title="我的订单"
        left-arrow
        @click-left="$router.back()"
      />
      <div class="BigBox">
      <van-tabs v-model="activeName" animated swipeable>
        <van-tab title="待付款" name="a">
          <div class="orderList" v-for="(item,idx) in tobePaid" :key="item.orderId">
            <div class="firstBox">
              <h4 class="firstH">订单号：{{item.time}}</h4>
              <div class="orderPro">
                <van-card
                  v-for="data in item.proData"
                  :key="data.proID"
                  :num="data.num"
                  :price="data.price"
                  :title="data.proName"
                  :thumb="data.img"
                />
            </div>
            <div calss="hBox">
               <van-cell title="龙头街上的扛把子" icon="location-o" value="修改地址" @click="select"/>
            </div>
            <van-submit-bar :price="orderPricePay(idx)" button-text="去支付" @submit="onSubmit(0, idx)">
              <van-popover
                v-model="showPopover"
                theme="dark"
                trigger="click"
                :actions="actions"
              >
              </van-popover>
            </van-submit-bar>
          </div>
          </div>
        </van-tab>
        <van-tab title="待发货" name="b">
          <div class="orderList" v-for="item in tobeDelivered" :key="item.orderId">
             <div class="firstBox">
              <h4 class="firstH">订单号：{{item.time}}</h4>
              <div class="orderPro">
                <van-card
                  v-for="data in item.proData"
                  :key="data.proID"
                  :num="data.num"
                  :price="data.price"
                  :title="data.proName"
                  :thumb="data.img"
                />
            </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="待收货" name="c">
          <div class="orderList" v-for="(item, idx) in tobeReceived" :key="item.orderId">
            <div class="firstBox">
            <h4 class="firstH">订单号：{{item.time}}</h4>
            <div class="orderPro">
              <van-card
                v-for="data in item.proData"
                :key="data.proID"
                :num="data.num"
                :price="data.price"
                :title="data.proName"
                :thumb="data.img"
              />
            </div>
            <van-submit-bar  button-text="确认收货" @submit="z(2, idx)" />
          </div>
          </div>
        </van-tab>
        <van-tab title="待评价" name="d">
         <div class="orderList" v-for="(item,index) in tobeEvaluated" :key="item.orderId">
           <div class="firstBox">
            <h4 class="firstH">订单号：{{item.time}}</h4>
            <div class="orderPro">
              <van-card
                v-for="data in item.proData"
                :key="data.proID"
                :num="data.num"
                :price="data.price"
                :title="data.proName"
                :thumb="data.img"
              >
                <template #footer>
                  <button @click="toEva(index)" class='eva'>评价</button>
                </template>
              </van-card>
            </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="退款/售后" name="e">
          <div class="orderList" v-for="(item,idx) in afterSales" :key="item.orderId">
            <div class="firstBox">
             <h4 class="firstH">订单号：{{item.time}}</h4>
             <div class="orderPro">
               <van-card
                 v-for="data in item.proData"
                 :key="data.proID"
                 :num="data.num"
                 :price="data.price"
                 :title="data.proName"
                 :thumb="data.img"
               >
                <template #footer>
                  <button @click="onSubmit(4, idx)">申请售后</button>
                </template>
              </van-card>
             </div>
             </div>
           </div>
        </van-tab>
      </van-tabs>
    </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Tab, Tabs, Card, SubmitBar, Popover, SwipeCell, Cell, CellGroup } from 'vant'
import { getOrder, payOrder, confirmOrder } from '@/api/request.js'

Vue.use(NavBar)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Card)
Vue.use(SubmitBar)
Vue.use(Popover)
Vue.use(SwipeCell)
Vue.use(Cell)
Vue.use(CellGroup)
// Vue.use(Rate)

export default {
  beforeRouteEnter (to, from, next) {
    if (sessionStorage.getItem('isLogin') === 'ok') {
      next()
    } else {
      next('/login?from=' + from.name)
    }
  },
  data () {
    return {
      showPopover: false,
      actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
      activeName: 'a',
      toPayList: [],
      orderList: [],
      tobePaid: [],
      tobeDelivered: [],
      tobeReceived: [],
      tobeEvaluated: [],
      completed: [],
      afterSales: []
    }
  },
  mounted () {
    this.activeName = sessionStorage.getItem('order')
    this.getOrderData()
  },
  methods: {
    getOrderData () {
      this.orderList = []
      this.tobePaid = []
      this.tobeDelivered = []
      this.tobeReceived = []
      this.tobeEvaluated = []
      this.completed = []
      this.afterSales = []
      getOrder({
        userId: sessionStorage.getItem('userId')
      }).then(data => {
        // 是个数组，有多个订单的数组
        this.orderList = data.data.msg
        // console.log(this.orderList)
        this.orderList.forEach(val => {
          switch (val.state) {
            case 0:
              this.tobePaid.push(val)
              break
            case 1:
              this.tobeDelivered.push(val)
              break
            case 2:
              this.tobeReceived.push(val)
              break
            case 3:
              this.tobeEvaluated.push(val)
              break
            case 4:
              this.afterSales.push(val)
              break
          }
        })
      })
    },
    select (v) {
      this.$router.push('./area')
    },
    onSubmit (t, i) {
      // 区分状态，进行相应操作
      switch (t) {
        case 0:
          // console.log('去支付', this.tobePaid)
          payOrder({
            userId: sessionStorage.getItem('userId'),
            orderId: this.tobePaid[i].orderId
          }).then(data => {
            this.activeName = 'b'
            this.getOrderData()
          })
          break
        case 2:
          // console.log('确认收货', this.tobeReceived[i].orderId)
          confirmOrder({
            userId: sessionStorage.getItem('userId'),
            orderId: this.tobeReceived[i].orderId
          }).then(data => {
            this.activeName = 'd'
            this.getOrderData()
          })
          break
        case 3:
          // console.log('待评价', this.tobeEvaluated)
          // evaluat({})
          break
        case 4:
          // console.log('退款/售后', this.completed)
          // complete({})
          break
      }
    },
    orderPricePay (i) {
      const arr = this.tobePaid[i].proData
      return arr.reduce((start, val) => {
        return start + val.num * val.price * 100
      }, 0)
    },
    toEva (i) {
      this.$router.push('/evaluate/' + this.tobeEvaluated[i].orderId)
    }
  }
}
</script>
<style lang="scss">
.orderBox{
  height: 100%;
  overflow: hidden;
  .van-nav-bar__content{
    height: 0.54rem;
    i{
      color: #000;
    }
    }
  .van-submit-bar{
    position: static;
  }
  .BigBox{
    background: #efefef;
    height: 100%;
    .van-tabs{
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .van-tabs__content--animated{
      overflow: auto;
      flex: 1;
      margin-bottom: .56rem;
    }
  }
    .eva{
      border: 1px solid #ee0a24;
      padding: 0.02rem 0.1rem;
      border-radius: .15rem;
      color: #ee0a24;
      font-size: .12rem;
    }
  .firstBox{
    margin-top: 0.125rem;
    background: #ffffff;
    padding: 0.1rem 0;
  }
  .firstH{
    padding-left: 0.175rem;
  }
}
</style>
